﻿@page "/splitbutton"
<style>
    .splitbutton-demo .rz-splitbutton {
        margin: 0 0.25rem 0.5rem 0;
    }

    .splitbutton-demo h3 {
        margin-bottom: 1rem;
    }
</style>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    SplitButton
</RadzenText>
<RadzenText SplitButtonTextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>SplitButton</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Filled SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    These are the default Radzen SplitButton.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonFilled">
    <SplitButtonFilled />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Outlined SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Variant="Variant.Outlined"</code> for outlined split button variant.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonOutlined">
    <SplitButtonOutlined />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Text SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Variant="Variant.Text"</code> for text split button variant.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonText">
    <SplitButtonText />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Content in SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Text, icons and images can be added to a split button.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonContent">
    <SplitButtonContent />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    SplitButton Sizes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Size</code> property to set split button size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonSizes">
    <SplitButtonSizes />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Disabled SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Disabled="true"</code> to disable a split button.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonDisabled">
    <SplitButtonDisabled />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Busy SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>IsBusy="true"</code> to show the busy indicator.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonBusy">
    <SplitButtonBusy />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    AlwaysOpenPopup SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>AlwaysOpenPopup="true"</code> to open popup with items on click.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonAlwaysOpenPopup">
    <SplitButtonAlwaysOpenPopup />
</RadzenExample>